<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>评论管理</title>
<style>
/* 自定义样式 */
body {
	padding-top: 56px; /* 用于修复固定导航栏时内容顶部被遮挡的问题 */
}

.navbar-custom {
	background-color: #007bff; /* 导航栏背景颜色 */
	color: #ffffff;
}

.navbar-custom .navbar-brand, .navbar-custom .navbar-nav .nav-link {
	color: #ffffff; /* 导航栏文字颜色 */
}

.navbar-custom .nav-item:hover {
	background-color: #0056b3; /* 鼠标悬停时的底色 */
}

.navbar-custom .nav-item:hover .nav-link {
	color: #ffffff; /* 鼠标悬停时的文字颜色 */
}
</style>
</head>
<body>

	<!-- 导航栏 -->
	<nav
		class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top navbar-custom">
		<a class="navbar-brand" href="#">书影音评论系统</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#navbarNav" aria-controls="navbarNav"
			aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav">
				<li class="nav-item"><a class="nav-link"
					href="<c:url value="/manager/home"/>">首页</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value="/manager/user"/>">用户管理</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value="/manager/media"/>">书影音管理</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value="/manager/comment"/>">评论管理</a></li>
			</ul>
			<c:if test="${not empty user }">
				<span class="navbar-text welcome-message ml-auto"> 欢迎您，<c:out
						value="${user.username }" />
				</span>
			</c:if>

		</div>
	</nav>

	<div class="container mt-4">
		<h2>评论管理</h2>
		<hr />
		<div class="container">
			<div class="row justify-content-end">
				<div class="col-auto">
					<form class="form-inline" method="POST"
						action="<c:url value='searchComment'/>">
						<div class="input-group">
							<input class="form-control" type="search" name="searchName"
								placeholder="输入用户名搜索" aria-label="搜索">
							<div class="input-group-append">
								<button class="btn btn-outline-primary" type="submit">搜索</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<br />


		<!-- 评论表格 -->
		<table class="table table-hover">
			<thead>
				<tr>
					<th>ID</th>
					<th>用户名称</th>
					<th>书/影/音名称</th>
					<th>评论内容</th>
					<th>评分</th>
					<th>时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!-- 示例评论数据 -->
				<c:forEach var="comment" items="${commentList}">
					<tr>
						<td>${comment.id}</td>
						<td>${comment.user.username}</td>
						<td>${comment.media.title}</td>
						<td>${comment.commentText}</td>
						<td>${comment.rating}</td>
						<td>${comment.commentDate }</td>
						<td>
							<!-- 删除评论按钮，调用 Bootstrap 模态框 -->
							<button type="button" class="btn btn-danger btn-sm ml-2"
								data-toggle="modal"
								data-target="#deleteCommentModal${comment.id}">删除</button>
						</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>


	</div>
	<div class="fixed-bottom" style="bottom: 50px">
		<nav>
			<ul class="pagination justify-content-center">
				<li class="page-item ${page == 1 ? 'disabled' : ''}"><c:url
						var="prevPageUrl" value="?page=${page - 1}">
						<c:if test="${not empty searchName}">
							<c:param name="searchName" value="${searchName}" />
						</c:if>
					</c:url> <a class="page-link" href="${prevPageUrl}" tabindex="-1"
					aria-disabled="${page == 1}">上一页</a></li>

				<c:forEach begin="1" end="${pageCount}" var="pageNum">
					<c:set var="active" value="${pageNum == page ? 'active' : ''}" />

					<li class="page-item ${active}"><c:url var="pageUrl"
							value="?page=${pageNum}">
							<c:if test="${not empty searchName}">
								<c:param name="searchName" value="${searchName}" />
							</c:if>
						</c:url> <a class="page-link" href="${pageUrl}">${pageNum}</a></li>
				</c:forEach>

				<li class="page-item ${page == pageCount ? 'disabled' : ''}"><c:url
						var="nextPageUrl" value="?page=${page + 1}">
						<c:if test="${not empty searchName}">
							<c:param name="searchName" value="${searchName}" />
						</c:if>
					</c:url> <a class="page-link" href="${nextPageUrl}">下一页</a></li>
			</ul>
		</nav>
	</div>

	<!-- 页脚 -->
	<footer class="text-center py-3 navbar-custom fixed-bottom"> &copy; 2023
		书影音 </footer>


	<!-- 删除评论模态框（为每个评论创建一个） -->
	<c:forEach var="comment" items="${commentList}">
		<div class="modal fade" id="deleteCommentModal${comment.id}"
			tabindex="-1" role="dialog"
			aria-labelledby="deleteCommentModalLabel${comment.id}"
			aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="deleteCommentModalLabel${comment.id}">确认删除评论</h5>
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<!-- 删除评论的表单  -->
					<form action="deleteComment" method="post">
						<input type="hidden" name="commentId" value="${comment.id }" />
						<div class="modal-body">
							<p>
								确定要删除评论 <strong>ID: ${comment.id}</strong> 吗？
							</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary"
								data-dismiss="modal">取消</button>
							<!-- 删除按钮，调用删除评论的逻辑 -->
							<input type="submit" class="btn btn-danger" />
						</div>
					</form>

				</div>
			</div>
		</div>
	</c:forEach>

	<!-- 包含 Bootstrap JS 和 jQuery -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<script
		src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>




</body>
</html>
